<template>
  <div class="container">
    <div class="p-lg-3 p-2 mt-lg-4 mb-lg-4 mt-2 mb-2 fws-bgimage">
      <h1>优秀大学生名师</h1>
    </div>
    <div class="row lh-lg mb-2 m-auto">
      <div class="col-lg-3"></div>
      <div class="col-lg-6">
        <ul class="list-unstyled d-flex justify-content-between text-center">
          <li
            class="bg-light p-2 rounded-pill w-50 fws-zdy-active"
            :class="{ active: active == item.name }"
            @click="selected(item.name)"
            v-for="item in teachermenu"
            :key="item.name"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="col-lg-3"></div>
    </div>
    <div class="d-flex justify-content-between align-items-center">
      <span class="fs-3 text-center">大学生名师</span>

      <a
        href=""
        class="
          col-lg-3
          text-lg-end text-center text-decoration-none text-black
          fws-zdy-liaojie-text-color
        "
        >更多大学生名师>></a
      >
    </div>
    <div class="fws-zdy-imgw">
      <!-- 小学教师 -->
      <div class="container" v-if="primarySchoolTeacher == '小学教师'">
        <div class="row">
          <!-- 卡片 -->
          <div
            class="
              card
              col-lg-3 col-md-6 col-12
              mt-lg-3 mt-md-2 mt-1
              border border-0
            "
          >
            <div class="ps-2 pe-2 rounded-3 shadow bg-white">
              <img
                src="/teacher_m.png"
                class="card-img-top rounded-pill mt-2 shadow-lg"
              />
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <span
                    class="card-title align-items-center fs-3"
                    style="font-size: 14px"
                    >韩{{ teachername }}</span
                  >
                  <div class="d-print-inline-block">
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#000"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                </div>
                <div class="d-flex justify-content-start mb-2">
                  <span class="me-3">21年教龄</span>
                  <span>清华大学</span>
                </div>
                <!-- h1{width:100px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} -->
                <p class="card-text fws-Omit-text">
                  海淀某重点中学在职一线数学高级教师，男，北师大数学教育专业毕业，19年教龄，八次带毕业班，市骨干教师，中考阅卷组主要成员，学校数学教研组长，这里，本人想结合初中数学科目的特点以及近年中考教学大纲，从数学的经验和一些实际做法着手，谈谈数学学习的策略：
                  首先，注重题目精选。实践证明，学生只有训练有代表性的题目才能达到事半功倍的效果。由于大多数学生还没有辨别、筛选题目能力。
                </p>
                <a href="#" class="btn fws-zdy-btn-bg">查看详情</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中学教师 -->
      <div class="container" v-else-if="MiddleSchoolTeacher == '中学教师'">
        <div class="row">
          <!-- 卡片 -->
          <div
            class="
              card
              col-lg-3 col-md-6 col-12
              mt-lg-3 mt-md-2 mt-1
              border border-0
            "
          >
            <div class="ps-2 pe-2 rounded-3 shadow bg-white">
              <img
                src="/teacher_m.png"
                class="card-img-top rounded-pill mt-2 shadow-lg"
              />
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <span
                    class="card-title align-items-center fs-3"
                    style="font-size: 14px"
                    >王{{ teachername }}</span
                  >
                  <div class="d-print-inline-block">
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#000"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                </div>
                <div class="d-flex justify-content-start mb-2">
                  <span class="me-3">21年教龄</span>
                  <span>清华大学</span>
                </div>
                <!-- h1{width:100px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} -->
                <p class="card-text fws-Omit-text">
                  海淀某重点中学在职一线数学高级教师，男，北师大数学教育专业毕业，19年教龄，八次带毕业班，市骨干教师，中考阅卷组主要成员，学校数学教研组长，这里，本人想结合初中数学科目的特点以及近年中考教学大纲，从数学的经验和一些实际做法着手，谈谈数学学习的策略：
                  首先，注重题目精选。实践证明，学生只有训练有代表性的题目才能达到事半功倍的效果。由于大多数学生还没有辨别、筛选题目能力。
                </p>
                <a href="#" class="btn fws-zdy-btn-bg">查看详情</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 大学教师 -->
      <div class="container" v-else-if="UniversityTeacher == '大学教师'">
        <div class="row">
          <!-- 卡片 -->
          <div
            class="
              card
              col-lg-3 col-md-6 col-12
              mt-lg-3 mt-md-2 mt-1
              border border-0
            "
          >
            <div class="ps-2 pe-2 rounded-3 shadow bg-white">
              <img
                src="/teacher_m.png"
                class="card-img-top rounded-pill mt-2 shadow-lg"
              />
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <span
                    class="card-title align-items-center fs-3"
                    style="font-size: 14px"
                    >张{{ teachername }}</span
                  >
                  <div class="d-print-inline-block">
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#000"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                </div>
                <div class="d-flex justify-content-start mb-2">
                  <span class="me-3">21年教龄</span>
                  <span>清华大学</span>
                </div>
                <!-- h1{width:100px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} -->
                <p class="card-text fws-Omit-text">
                  海淀某重点中学在职一线数学高级教师，男，北师大数学教育专业毕业，19年教龄，八次带毕业班，市骨干教师，中考阅卷组主要成员，学校数学教研组长，这里，本人想结合初中数学科目的特点以及近年中考教学大纲，从数学的经验和一些实际做法着手，谈谈数学学习的策略：
                  首先，注重题目精选。实践证明，学生只有训练有代表性的题目才能达到事半功倍的效果。由于大多数学生还没有辨别、筛选题目能力。
                </p>
                <a href="#" class="btn fws-zdy-btn-bg">查看详情</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 其它教师 -->
      <div class="container" v-else-if="OtherTeachers == '其他教师'">
        <div class="row">
          <!-- 卡片 -->
          <div
            class="
              card
              col-lg-3 col-md-6 col-12
              mt-lg-3 mt-md-2 mt-1
              border border-0
            "
          >
            <div class="ps-2 pe-2 rounded-3 shadow bg-white">
              <img
                src="/teacher_m.png"
                class="card-img-top rounded-pill mt-2 shadow-lg"
              />
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <span
                    class="card-title align-items-center fs-3"
                    style="font-size: 14px"
                    >赵{{ teachername }}</span
                  >
                  <div class="d-print-inline-block">
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#000"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                </div>
                <div class="d-flex justify-content-start mb-2">
                  <span class="me-3">21年教龄</span>
                  <span>清华大学</span>
                </div>
                <!-- h1{width:100px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} -->
                <p class="card-text fws-Omit-text">
                  海淀某重点中学在职一线数学高级教师，男，北师大数学教育专业毕业，19年教龄，八次带毕业班，市骨干教师，中考阅卷组主要成员，学校数学教研组长，这里，本人想结合初中数学科目的特点以及近年中考教学大纲，从数学的经验和一些实际做法着手，谈谈数学学习的策略：
                  首先，注重题目精选。实践证明，学生只有训练有代表性的题目才能达到事半功倍的效果。由于大多数学生还没有辨别、筛选题目能力。
                </p>
                <a href="#" class="btn fws-zdy-btn-bg">查看详情</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <a href="">
          <img src="/home_btn1.png" class="m-auto d-block mt-5" />
        </a>
      </div>

      <div class="borders border-top border-warning border-2 mt-3">
        <div class="fws-zdy-online-bg text-center mt-5 mb-5">
          <a href="" class="text-decoration-none"> 名师讲堂案例 </a>
        </div>
        <div class="d-flex justify-content-between fws-zdy-text-cneter">
          <div
            class="
              text-center
              bg-warning
              p-3
              fw-bold
              rounded-pill
              text-light
              m-auto
            "
          >
            No.1家教风采
          </div>
          <div
            class="
              text-center
              bg-warning
              p-3
              fw-bold
              rounded-pill
              text-light
              m-auto
            "
          >
            No.1家教风采
          </div>
          <div
            class="
              text-center
              bg-warning
              p-3
              fw-bold
              rounded-pill
              text-light
              m-auto
            "
          >
            No.1家教风采
          </div>
          <div
            class="
              text-center
              bg-warning
              p-3
              fw-bold
              rounded-pill
              text-light
              m-auto
            "
          >
            No.1家教风采
          </div>
        </div>
        <video-player />
      </div>
    </div>
  </div>
</template>

<script>
import VideoPlayer from "./VideoPlayer.vue";
export default {
  components: { VideoPlayer },
  data() {
    return {
      teachermenu: [
        { name: "小学教师" },
        { name: "中学教师" },
        { name: "大学教师" },
        { name: "其他教师" },
      ],
      active: "小学教师",
      value: 3.7,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      teachername: "老师",
      primarySchoolTeacher: "小学教师",
      MiddleSchoolTeacher: "中学教师",
      UniversityTeacher: "大学教师",
      OtherTeachers: "其他教师",
    };
  },
  methods: {
    selected(name) {
      this.active = name;
      this.primarySchoolTeacher = name;
      this.MiddleSchoolTeacher = name;
      this.UniversityTeacher = name;
      this.OtherTeachers = name;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  user-select: none;
}
.fws-bgimage {
  background-image: url("/public/home_tit_nice2.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  h1 {
    text-align: center;
    font-size: 36px;
  }
}
.active {
  background-color: orange !important;
  color: #fff;
}
.fws-zdy-active {
  &:hover {
    background-color: orange !important;
    color: #fff;
  }
}
.fws-fs {
  font-size: 18px;
}
.fws-Omit-text {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fws-zdy-card-bg {
  background-color: rgba($color: #008c8c, $alpha: 0.4);
}
.fws-zdy-btn-bg {
  background-color: rgba($color: #008c8c, $alpha: 0.8);
  color: #fff;
}
.fws-zdy-liaojie-text-color {
  &:hover {
    color: orange !important;
  }
}
.fws-zdy-online-bg {
  height: 65px;
  background-image: url("/public/home_tit_bg2.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  a {
    color: black;
    text-align: center;
    font-size: 36px;
    line-height: 65px;
  }
}
.fws-zdy-text-cneter {
  text-align: center;
}
</style>